@extends('layouts.default')

@section('title', '任教学科')

@push('scripts')
<script src="{{ asset('lib/xm-select-v1.2.4/xm-select.js')}}"></script>
<script>
    layui.use(['layer','form','table','laytpl','laydate','element','laypage','upload'], function(){
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var laytpl = layui.laytpl;
        var laydate = layui.laydate;
        var element = layui.element;
        var laypage = layui.laypage;
        var upload = layui.upload;
        var xmDemo;
        var id = "{{request()->get('id',0)}}";

        laydate.render({
            elem: '#begin_date'
        });

        laydate.render({
            elem: '#end_date'
        });

        laydate.render({
            elem: '#created_at'
        });

        laydate.render({
            elem: '#updated_at'
        });

        renderSelect(function(){
            //编辑
            if(id != 0){
                getAwardsFirst({'id':id},function(res){
                    if(res.code == 1){
                        form.val("formTest", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
                            'data_version_id': res.data.data_version_id,
                            'name': res.data.name,
                            'begin_date': res.data.begin_date,
                            'end_date': res.data.end_date,
                            'category': res.data.category_array.length>0? res.data.category_array[0].optionId:'',
                            'grade': res.data.grade_array.length>0? res.data.grade_array[0].optionId:'',
                            'level': res.data.level_array.length>0?res.data.level_array[0].optionId:'',
                            'customer_grade': res.data.customer_grade,
                            'award_from': res.data.award_from,
                            'nickname': res.data.nickname,
                            'created_at': res.data.created_at,
                            'award_recipient': res.data.award_recipient,
                        });
                        // if(res.data.category_array.length>0 && res.data.category_array[0].optionId == 150){
                        //     $('.award_recipient').show();
                        // }
                        if(res.data.grade_array.length>0 && res.data.grade_array[0].selectValue == '其他'){
                            $('.zdydj').show();
                        }
                        form.val("formTest2", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
                            'id': res.data.id,
                            'form_instance_id': res.data.form_instance_id,
                            'status': res.data.forminstance.status,
                            'comment': res.data.forminstance.comment,
                            'updated_at': res.data.forminstance.updated_at,
                            'updater_id': res.data.check_name,
                        });

                        $('#nickname').text(res.data.nickname);
                        $('#updater_id').text(res.data.check_name);

                        //参与教师
                        xmDemo.setValue(res.data.participants);
                        //文件
                        if(res.data.proof_material_array.length){
                            var getTpl = demo.innerHTML
                                ,view = document.getElementById('files');
                                laytpl(getTpl).render(res.data.proof_material_array, function(html){
                                view.innerHTML = html;
                            });
                        }
                    }
                })
            }
        });

        //下拉框初始化
        async function renderSelect(callback){
             //获取字典下拉框数据
            await new Promise((resolve) => {
                getDictionaryItem({'diccode': ['award_type','LEVEL','award_grade']}, function (res){
                    if(res.code === 1) {
                        let data = res.data;
                        for(var k in data) {
                            if(k == 'hdjb'){
                                $('[data-role='+k+'List]').empty().append('<option value="">请选择</option>');
                            }else{
                                $('[data-role='+k+'List]').empty().append('<option value="">请选择</option>');
                            }
                            let d = data[k];
                            for (var i in d) {
                                $('[data-role='+k+'List]').append('<option value="' + d[i].optionId + '">' + d[i].selectValue + '</option>');
                            }
                        }
                        form.render();
                        return resolve();
                    }
                });
            });

             //获取学期
            await new Promise((resolve) => {
                getTermData({},function(res){
                    if(res.code == 1){
                        $('select[name=data_version_id]').empty();
                        $('select[name=data_version_id]').append('<option value="">请选择</option>');
                        for(var i in res.data){
                            $('select[name=data_version_id]').append('<option value="'+res.data[i].id+'">'+res.data[i].title+'</option>');
                        }
                        form.render();
                        return resolve();
                    }
                })
            })

            //参与人
            await new Promise((resolve) => {
                getParticipantsData({},function(res){
                    if(res.code == 1){
                        xmDemo = xmSelect.render({
                                    el: '#demo1',
                                    autoRow: true,
                                    filterable: true,
                                    tree: {
                                        show: true,
                                        showFolderIcon: true,
                                        showLine: true,
                                        indent: 20,
                                        expandedKeys:false
                                    },
                                    filterable: true,
                                    height: 'auto',
                                    name:'participant',
                                    layVerify: 'required',
                                    layVerType: 'msg',
                                    layReqText:'参与教师不能为空',
                                    theme: {
                                        color: '#2d8cf0',
                                    },
                                    model: {
                                        label: {
                                            type: 'block',
                                            block: {
                                                //最大显示数量, 0:不限制
                                                showCount: 0,
                                                //是否显示删除图标
                                                showIcon: false,
                                            }
                                        }
                                    },
                                    searchTips:'关键字搜索',
                                    disabled:true,
                                    data: function(){
                                        return res.data
                                    }
                                })
                                return resolve();
                    }
                })
            })


            callback();
        }






    });
</script>
<script id="demo" type="text/html">
    <ul style="line-height: 38px;">
        @{{#  layui.each(d, function(index, item){ }}
        <li >
            <a style="color:#0e90d2;" target="_blank" href="@{{item.file_info.file_dir}}@{{item.file_info.file_path}}" >@{{item.file_info.file_name}} </a>
            <a style="color:#74B8FF" href="@{{item.file_info.file_dir}}@{{item.file_info.file_path}}" download="@{{item.file_info.file_name}}" >
                <span class="icon pear-icon pear-icon-download" style="color:#74B8FF;margin-left:10px;" ></span>
            </a>
        </li>
        @{{#  }); }}
    </ul>
</script>
@endpush

@section('content')
<style>
    .opt-panel{padding: 20px;}
    .panel-title h3{font-weight: 800;margin-bottom: 20px;}

    #add-form{padding: 20px 5px;}
    .opt-area{display: flex;flex-direction: row-reverse;padding: 10px 20px;margin-bottom: 20px;}
    .opt-area button{margin-left: 10px;}
    .layuik-inline .layuik-input-inline{width: 100% !important;}
</style>

<div class="layui-row">
    <div class="layui-panel opt-panel">
        <div class="panel-title">
            <h3>获奖情况 - 查看</h3>
        </div>
        <form class="layui-form" action="" lay-filter="formTest">
            <div class="layui-row">
                <div class="layuik-form-item layuik-columns-two">
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>学年学期：</label>
                        <div class="layuik-input-inline">
                            <select disabled class="data_version_id" name="data_version_id" lay-filter="termList" data-role="termList" lay-verify="required" lay-reqText=""></select>
                        </div>
                    </div>
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>名称：</label>
                        <div class="layuik-input-inline">
                            <input disabled type="text" name="name" required lay-verify="required" placeholder="" lay-reqText="" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>

                <div class="layuik-form-item layuik-columns-two">
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>获奖日期：</label>
                        <div class="layuik-input-inline">
                            <input disabled type="text" name="begin_date" id="begin_date" required lay-verify="required" placeholder="" lay-reqText="" autocomplete="off" class="layui-input">
                        </div>
                    </div>
{{--                    <div class="layuik-inline">--}}
{{--                        <label class="layuik-form-label"><i class="redstar">*</i>结束日期：</label>--}}
{{--                        <div class="layuik-input-inline">--}}
{{--                            <input disabled type="text" name="end_date" id="end_date" required lay-verify="required" placeholder="" lay-reqText="" autocomplete="off" class="layui-input">--}}
{{--                        </div>--}}
{{--                    </div>--}}
                </div>

                <div class="layuik-form-item layuik-columns-two">
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>类型：</label>
                        <div class="layuik-input-inline">
                            <select disabled name="category" lay-filter="award_typeList" data-role="award_typeList" lay-verify="required" lay-reqText=""></select>
                        </div>
                    </div>
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>级别：</label>
                        <div class="layuik-input-inline">
                            <select disabled name="level" lay-filter="LEVELList" data-role="LEVELList" lay-verify="required" lay-reqText=""></select>
                        </div>
                    </div>
                </div>

                <!-- <div class="layuik-form-item award_recipient" style="display:none;">
                    <div class="layuik-inline">
                        <label class="layuik-form-label">指导对象：</label>
                        <div class="layuik-input-inline">
                            <input disabled type="text" name="award_recipient"  placeholder="请输入教师/学生"  autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>  -->

                <div class="layuik-form-item layuik-columns-two">
                    <div class="layuik-inline">
                        <label class="layuik-form-label">等级：</label>
                        <div class="layuik-input-inline">
                            <select disabled name="grade" lay-filter="award_gradeList" data-role="award_gradeList"  lay-reqText=""></select>
                        </div>
                    </div>
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>发奖单位：</label>
                        <div class="layuik-input-inline">
                            <input disabled type="text" name="award_from"  required lay-verify="required" placeholder="" lay-reqText="" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>

                <div class="layuik-form-item layuik-columns-two zdydj" style="display:none">
                    <div class="layuik-inline">
                        <label class="layuik-form-label">自定义等级：</label>
                        <div class="layuik-input-inline">
                            <input disabled type="text" name="customer_grade"  placeholder="" lay-reqText="" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>

                <div class="layuik-form-item ">
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>参与教师：</label>
                        <div class="layuik-input-inline" style="width: 85%;">
                        <div type="text" id="demo1"  class="xm-select-demo"></div>
                        </div>
                    </div>
                </div>


                <div class="layuik-form-item layuik-columns-two">
                    <div class="layuik-inline">
                        <label class="layuik-form-label">证明材料：</label>
                        <div class="layuik-input-inline">

                        <div id="files" ></div>

                        </div>

                    </div>
                </div>

                <div class="layuik-form-item layuik-columns-two">
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>创建人：</label>
                        <div class="layuik-input-inline">
                            <span style="line-height: 38px;border: 1px solid #eee;padding: 10px;" id="nickname"></span>
                        </div>
                    </div>
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>创建时间：</label>
                        <div class="layuik-input-inline">
                            <input disabled type="text" name="created_at" id="created_at" required lay-verify="required" placeholder="" lay-reqText="" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>

            </div>


        </form>
    </div>
</div>

<div class="layui-row" style="margin-top:10px;">
    <div class="layui-panel opt-panel">
        <div class="panel-title">
            <h3>获奖情况 - 审核</h3>
        </div>

        <form class="layui-form" action="" lay-filter="formTest2">
            <div class="layui-row">
                <div class="layuik-form-item ">
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>审核结果：</label>
                        <div class="layuik-input-inline">
                            <input disabled type="radio" name="status" value="PASS" title="通过" >
                            <input disabled type="radio" name="status" value="REVIEW_FAIL" title="驳回" >
                        </div>
                    </div>

                </div>

                <div class="layuik-form-item ">
                    <div class="layuik-inline">
                        <label class="layuik-form-label">原因：</label>
                        <div class="layuik-input-inline">
                        <textarea disabled name="comment" placeholder="请输入内容" class="layui-textarea"></textarea>
                        </div>
                    </div>

                </div>


                <div class="layuik-form-item layuik-columns-two">
                    <div class="layuik-inline">
                        <label class="layuik-form-label">审核人：</label>
                        <div class="layuik-input-inline">
                            <span style="line-height: 38px;border: 1px solid #eee;padding: 10px;" id="updater_id"></span>
                        </div>
                    </div>
                    <div class="layuik-inline">
                        <label class="layuik-form-label">审核时间：</label>
                        <div class="layuik-input-inline">
                            <input disabled type="text" name="updated_at" id="updated_at" required lay-verify="required" placeholder="" lay-reqText="" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>

                <input type="hidden" name="id" value="" >
                <input type="hidden" name="form_instance_id" value="" >
            </div>

            @if(!isset($_GET['hide']))
            <div class="layui-row">
                <div class="opt-area">
                    <a href="javascript:history.go(-1);" ><button class="layui-btn layui-btn-primary" type="button">返回</button></a>

                </div>
            </div>
            @endif

        </form>

    </div>
</div>

@endsection
